<template>
  <label for="_msg">msg</label>
  <input
    id="_msg"
    :value="msg"
    @input="$emit('update:msg', $event.target.value)"
  />
  <br />
  <label for="_text">text</label>
  <input
    id="_text"
    :value="data.text"
    @input="updateData('text', $event.target.value)"
  />
  <br />
  <input
    type="radio"
    id="_one"
    value="one"
    :checked="data.picked === 'one'"
    @change="updateData('picked', $event.target.value)"
  />
  <label for="_one">One</label>
  <input
    type="radio"
    id="_two"
    value="two"
    :checked="data.picked === 'two'"
    @change="updateData('picked', $event.target.value)"
  />
  <label for="_two">Two</label>
  <br />
  <button @click="reset">重置</button>
</template>

<script lang="ts">
  import { defineComponent, PropType, toRaw } from 'vue';

  export interface ExampleData {
    text: string;
    picked: string;
  }

  export default defineComponent({
    name: 'ComponentExample',
    props: {
      msg: String,
      data: Object as PropType<ExampleData>
    },
    emits: ['update:msg', 'update:data', 'reset'],
    setup: (props, context) => {
      console.log(toRaw(props.data));

      return {
        reset: () => {
          context.emit('reset');
        },
        updateData: (key: string, value: unknown) => {
          // console.log(`${key} to ${value}`);
          context.emit('update:data', {
            ...props.data,
            [key]: value
          });
        }
      };
    }
  });
</script>

<style scoped></style>
